<template>
<div>
    <!-- 签署证券理财业务风险揭示书 -->
    <div class="body" ref="finanRiskContract"></div>

    <div class="footer-box">
      <div class="footer fix">
        <a herf="javascript:;" class="btn" @click="agree">同意签署</a>
      </div>
    </div>
</div>
</template>
<script>
import { getContractById, signWithContent } from '@/api/index';
import DZUtils from '@/utils/DZUtils';

export default {
  components: {
  },
  data() {
    return {
      id: '',
      html: ''
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      const res2 = await getContractById({ type: 'finanRiskCt' });
      if (res2.returnCode === '0') {
        this.id = res2.dataSet[0].id;
        this.html = res2.dataSet[0].templateContent;

        this.$nextTick(() => {
          this.$refs.finanRiskContract.innerHTML = this.html;
        });
      }
    },
    async agree() {
      const batchNo = DZUtils.getStorage('batchNo') || '';
      const params = {
        id: this.id,
        batchNo,
        content: this.html.replace(/<[^>]+>/g, ''),
        source: 'finanRiskContract'
      };
      const { returnCode, dataSet, returnInfo } = await signWithContent(params);
      if (returnCode === '0') {
        // 留痕成功
        this.$router.replace({
          path: `${this.global.publicPath}/finan/payment`,
          query: {
            ...this.$route.query,
            prevPage: 'finanRiskContract'
          }
        });
      } else {
        DZUtils.iAlert('错误提示', returnInfo);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.body{
  padding: 10px 15px 60px;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.footer-box{
  height: 50px;
  .footer{
    width: 100%;
    text-align: center;
    &.fix{
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 1;
    }
    .btn {
      width: 100%;
      font-size: 18px;
      color: #fff;
      text-align: center;
      line-height: 50px;
      display: inline-block;
      background-image: linear-gradient(90deg, #3861FE 0%, #489BFE 100%);
      &[disabled=disabled]{
        color: #72819B;
        background-image: linear-gradient(90deg, #B5C6E5 0%, #E2E8F2 100%);
      }
    }
  }
}
</style>
